<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="aaa"></div>
    <button @click="print">打印</button>
    <button @click="print2">直接打印</button>
    <hr />
    <div>
      批量打印
      <button @click="print3">批量打印</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      $hiprintTemplate: null,
      //提前定义好打印模板  barcodeData, count字段为自定义数据字段，需传入动态数据 panel
      // panel:

      //在data定义打印field字段数据
      printData: [
        { table: [{ NAME: '加多宝', SL: '1', DJ: '12' }] },
        { table: [{ NAME: '王老吉', SL: '2', DJ: '13' }] },
        { table: [{ NAME: '和其正', SL: '3', DJ: '14' }] },
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 引入后使用示例
      this.$pluginName.init();
      // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
      // 想要实现拖拽设计页面,请往下看 '自定义设计'
      const $hiprintTemplate = new this.$pluginName.PrintTemplate({
        template: {
          "panels":
            [
              {
                "index": 0, "name": 1, "height": 80, "width": 220, "paperHeader": 0, "paperFooter": 226,
                "printElements": [
                  {
                    "options": { "left": 237.5, "top": 45, "height": 17, "width": 120, "testData": "单据表头", "fontSize": 16.5, "field": "header", "fontWeight": "700", "textAlign": "center", "hideTitle": true, "title": "单据表头", "qid": "headera", "coordinateSync": false, "widthHeightSync": false, "qrCodeLevel": 0, "right": 357.75, "bottom": 62.75, "vCenter": 297.75, "hCenter": 54.25 }, "printElementType": { "title": "单据表头", "type": "text" }
                  }, 
                  {
                    "options": { "left": 42.5, "top": 72.5, "height": 54, "width": 550, "tableFooterRepeat": "last",
                      "fields": [
                        { "text": "名称", "field": "NAME" },
                        { "text": "数量", "field": "SL" },
                        { "text": "单价", "field": "DJ" },
                      ],
                      "field": "table",
                      "tableHeaderRepeat": "first",
                      // "footerFormatter": "function(t,e,n,i){return n&&n[\"totalCap\"]?'<td style=\"padding:0 10px\" colspan=\"100\">'.concat(\"应收金额大写: \"+n[\"totalCap\"],\"</td>\"):'<td style=\"padding:0 10px\" colspan=\"100\">应收金额大写: </td>'}",
                      // "rowsColumnsMerge": "function(t,e,n){return 0==n?[1,t.INDEX%2==1?2:1]:n>0&&n<2?[t.INDEX%2==1?0:1,1]:[t.INDEX%2==1?2:0,1]}",
                      "qid": "table", "right": 591, "bottom": 126, "vCenter": 316, "hCenter": 99,
                      "coordinateSync": false, "widthHeightSync": false,
                      "columns": [[
                        { "width": 250, "title": "名称", "field": "NAME", "checked": true, "columnId": "NAME", "fixed": false, "rowspan": 1, "colspan": 1, "align": "center" },
                        { "width": 133, "title": "数量", "field": "SL", "checked": true, "columnId": "SL", "fixed": false, "rowspan": 1, "colspan": 1, "align": "center" },
                        { "width": 166, "title": "单价", "field": "DJ", "checked": true, "columnId": "DJ", "fixed": false, "rowspan": 1, "colspan": 1, "align": "center" },
                      ]]
                    },
                    "printElementType": {
                      "title": "订单数据", "type": "table", "editable": true, "columnDisplayEditable": true, "columnDisplayIndexEditable": true, "columnTitleEditable": true,
                      "columnResizable": true, "columnAlignEditable": true, "isEnableEditField": true, "isEnableContextMenu": true, "isEnableInsertRow": true, "isEnableDeleteRow": true, 
                      "isEnableInsertColumn": true, "isEnableDeleteColumn": true, "isEnableMergeCell": true
                    }
                  }
                ],
                "paperNumberLeft": 565, "paperNumberTop": 204, "paperNumberContinue": true, "watermarkOptions": {}, "panelLayoutOptions": {}
              }],
          "settingContainer": "#aaa"
        }
      });
      this.$hiprintTemplate = $hiprintTemplate;
      // const panel = $hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
      // //文本
      // panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
      // //条形码
      // panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
      // //二维码
      // panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
      // //长文本
      // panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
      // //表格
      // // panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
      // //Html
      // panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content: '' } });
      // //竖线//不设置宽度
      // panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
      // //横线 //不设置高度
      // panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
      // //矩形
      // panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
    },
    print() {
      //调用其中一种
      //打印11
      this.$hiprintTemplate.print({});
    },
    print2() {
      //直接打印，需要安装客户端
      this.$hiprintTemplate.print2({});
    },
    // 批量打印
    print3() {
      this.$hiprintTemplate.print(this.printData, {})
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}</style>
